<template>
    <div class="CommonAside">
        <div class="CommonAside-header">
            <span>汽车CRM系统</span>
        </div>
        <div class="CommonAside-content">
            <el-menu class="el-menu-vertical-demo" default-active="2" :default-openeds="openeds">
                <!-- 首页 -->
                <el-menu-item index="1" class="home" @click="goHome()"
                    :class="this.$route.path === '/home' ? 'is-active' : ''">
                    <i class="el-icon-edit-outline"></i>
                    <span slot="title">首页</span>
                </el-menu-item>

                <!-- 营销管理 -->
                <el-submenu index="2">
                    <template slot="title">
                        <i class="el-icon-document-copy"></i>
                        <span>营销管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="2-1" @click="goClue()"
                            :class="this.$route.path === '/clue' ? 'is-active' : ''">线索管理</el-menu-item>
                        <el-menu-item index="2-2" @click="goActivity()"
                            :class="this.$route.path === '/activity' ? 'is-active' : ''">活动管理</el-menu-item>
                        <el-menu-item index="2-3" @click="goChannel()"
                            :class="this.$route.path === '/channel' ? 'is-active' : ''">渠道管理</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

                <!-- 营销管理 -->
                <el-submenu index="3">
                    <template slot="title">
                        <i class="el-icon-date"></i>
                        <span>客户管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="3-1" @click="goCustomer()"
                            :class="this.$route.path === '/customer' ? 'is-active' : ''">客户管理</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

                <!-- 库存管理 -->
                <el-submenu index="4">
                    <template slot="title">
                        <i class="el-icon-notebook-2"></i>
                        <span>库存管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="4-1" @click="goVehicle()"
                            :class="this.$route.path === '/vehicle' ? 'is-active' : ''"> 车辆管理 </el-menu-item>
                        <el-menu-item index="4-2" @click="goQueue()"
                            :class="this.$route.path === '/queue' ? 'is-active' : ''">排队库管理</el-menu-item>

                    </el-menu-item-group>
                </el-submenu>

                <!-- 财务管理 -->
                <el-submenu index="5">
                    <template slot="title">
                        <i class="el-icon-circle-check"></i>
                        <span>财务管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="5-1" @click="goContract()"
                            :class="this.$route.path === '/contract' ? 'is-active' : ''">合同管理</el-menu-item>
                        <el-menu-item index="5-2" @click="goOrder()"
                            :class="this.$route.path === '/order' ? 'is-active' : ''">订单管理</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

            </el-menu>
        </div>

    </div>
</template>
<script>
export default {
    name: "CommonAside",
    data() {
        return {
            openeds: ['2', '3', '4'],
        }
    },
    methods: {

        goHome() {
            if (this.$route.path !== '/home') {
                this.$router.push("/home")
            }
            else {
                return
            }
        },
        goClue() {
            if (this.$route.path !== '/clue') {
                this.$router.push("/clue")
            }
            else {
                return
            }

        },
        goActivity() {
            if (this.$route.path !== '/activity') {
                this.$router.push("/activity")
            }
            else {
                return
            }
        },
        goChannel() {
            if (this.$route.path !== '/channel') {
                this.$router.push("/channel")
            }
            else {
                return
            }
        },
        goCustomer() {
            if (this.$route.path !== '/customer') {
                this.$router.push("/customer")
            }
            else {
                return
            }
        },
        goVehicle() {
            if (this.$route.path !== '/vehicle') {
                this.$router.push("/vehicle")
            }
            else {
                return
            }
        },
        goQueue() {
            if (this.$route.path !== '/queue') {
                this.$router.push("/queue")
            }
            else {
                return
            }
        },
        goContract() {
            if (this.$route.path !== '/contract') {
                this.$router.push("/contract")
            }
            else {
                return
            }
        },
        goOrder() {
            if (this.$route.path !== '/order') {
                this.$router.push("/order")
            }
            else {
                return
            }
        }
    }
}


</script>
 
<style lang="less" scoped>
.CommonAside {
    min-height: 100vh;
    background-color: #000;

    .CommonAside-header {
        display: flex;
        width: 100%;
        height: 60px;
        line-height: 60px;
        color: #ffffff;
        background-color: #201d1d;

        span {
            margin-left: 30px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
        }
    }

    .CommonAside-content {



        /deep/.el-menu {
            border: 0;
            background-color: #000;
            color: #fff;

            .el-submenu__title {
                display: flex;
                align-items: center;
                color: #fff;
                padding: 0;
            }

            .el-submenu__title:hover {
                background-color: #a7a7a7 !important;
            }

            .el-menu-item {
                display: flex;
                align-items: center;
                padding: 0;
                padding-left: 50px !important;
                color: #fff;

            }

            .el-menu-item.is-active {
                background-color: rgb(12, 85, 245) !important;
            }

            .el-menu-item:hover {
                background-color: #a7a7a7;
            }


        }

        /deep/.el-menu {
            .el-menu-item.home {
                display: flex;
                align-items: center;
                padding-left: 20px !important;
            }
        }
    }
}
</style>